.draft_list_drawer {
  position: relative;
}

:global(html.mobile) {
  .draft_list_drawer {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-color: whitesmoke;
    background-image: url('../../../bg.webp');
    background-repeat: repeat;
    box-shadow: 0px 0px 40px #00000022;
    z-index: 2;
  }
}

.draft_list {
  padding: 10px;
  margin: 0px;
  transition: all 255ms;
  padding: 0px;

  .list_item {
    text-align: start;
    max-width: calc(100%);
    user-select: none;

    .list_item_btn {
      outline: none;
      border: 1px transparent solid;
      background-color: transparent;
      transition: background-color 200ms;
      width: calc(100%-2px);

      &>.inner {
        padding: 10px;
        text-align: start;
        display: flex;
        flex-direction: column;

        &>*:not(:last-child) {
          margin-bottom: 5px;
        }

        &>.title {
          font-weight: 600;
          text-overflow: ellipsis;
          word-break: keep-all;
          overflow: hidden;
          white-space: nowrap;
          font-size: 16px;
        }

        &>.no_title {
          font-weight: 600;
          text-overflow: ellipsis;
          word-break: keep-all;
          overflow: hidden;
          white-space: nowrap;
          font-size: 16px;
          opacity: 0.5;
        }



        &>.breif {
          text-overflow: ellipsis;
          overflow: hidden;
          max-lines: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          max-width: calc(100%);
          opacity: 0.8;
          font-size: 12px;
        }

        &>.bottom {
          display: flex;
          font-size: 14px;
          overflow: hidden;
          align-items: center;

          &>.status {
            flex: 1;
            font-weight: bold;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: keep-all;
            white-space: nowrap;
          }

          &>.modify_time {
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: keep-all;
            white-space: nowrap;
          }
        }
      }
    }

    .list_item_btn:hover {
      background-color: #00000011;
    }
  }

  .list_item_actived {

    .list_item_btn,
    .list_item_btn:hover {
      background-color: #00000022;
    }
  }

  .list_item_is_anchor {

    .list_item_btn,
    .list_item_btn:hover {
      border: 1px solid #00000044;
    }
  }

  .list_item_disabled {

    .list_item_btn,
    .list_item_btn:hover {
      background-color: transparent;
      opacity: 0.5;
    }
  }

  .list_item_selected {

    .list_item_btn,
    .list_item_btn:hover {
      background-color: #00000022;
    }
  }
}